<template>
  <div class="searchbods">
    <div class="sstop">
      <div class="search">
        <span class="img" @click="backtrack"
          ><img src="../assets/syb.png" alt=""
        /></span>
        <div class="shos">
          <van-search
            v-model="value"
            show-action
            shape="round"
            placeholder="请输入搜索关键词"
            @input="shur"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        </div>
      </div>
      <!-- <search :vlua="val"></search> -->
    </div>
    <div class="body" v-if="show">
      <div style="height: 10px"></div>
      <ul class="">
        <li class="title">
          <span>历史记录:</span> <span @click="qingc">清除记录</span>
        </li>
        <li>
          <div class="juli">
            <span
              v-for="(item, index) in lisjilu"
              :key="index"
              @click="shuru(item)"
              >{{ item }}</span
            >
          </div>
        </li>
      </ul>
    </div>

    <div class="liebiao" v-else>
      <div class="paix">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            @change="paixa"
            :options="option1"
          />
          <van-dropdown-item
            v-model="value2"
            @change="paixb"
            :options="option2"
          />
        </van-dropdown-menu>
      </div>

      <div class="kuanton" v-if="list.length != 0">
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
            @click="todetails(item.id)"
          >
            <div class="coonte">
              <div class="img">
                <img :src="item.picUrl" alt="" />
              </div>
              <div class="text">
                <div class="texstitlie">
                  <span>{{ item.name | zhiti }}</span>
                  <div class="gon">
                    <span v-if="item.isNew">上新</span>
                    <span v-if="item.isHot">热门</span>
                    <span>￥{{ item.retailPrice }}</span>
                  </div>
                  <!-- <div class="qian">
                 isHot: false
isNew: false
               
                </div> -->
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 如果没有数据 -->
      <div v-else class="meiyjul">
        <div class="img">
          <img src="../assets/wu.png" alt="">
        </div>
        <span>暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script>
import { DropdownMenu, DropdownItem } from "vant";
import { Search } from "vant";
import search from "../components/Search.vue";
import API from "../http/API";
import { Toast } from "vant";
export default {
  components: {
    search,
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Toast.name]: Toast,
  },
  watch: {
    $route: {
      handler(to) {
        console.log(to);
        // 如果去的不是详情页把数据恢复默认
        // if (to.path != "/details") {
        //   this.val = "";

        //   this.show = true;
        //   this.value = "";
        //   this.value1 = "";
        //   this.value2 = "desc";

        //   this.list = [];
        //   this.index = 1;
        //   this.zonshu = 0;
        // }
      },
    },
  },
  data() {
    return {
      val: "",
      lisjilu: [],
      show: true,
      value: "",
      value1: "",
      value2: "desc",
      option1: [
        { text: "默认", value: "" },
        { text: "时间", value: "add_time" },
        { text: "名字", value: "name" },
        { text: "价格", value: "retail_price" },
      ],
      option2: [
        { text: "降序", value: "desc" },
        { text: "升序", value: "asc" },
      ],
      list: [],
      index: 1,
      zonshu: 0,
    };
  },
  methods: {
    shuru(e) {
      // console.log("历史")
      // console.log(e)
      this.value = e;
       this.val = e;
    },
    shur(e) {
      // console.log(e);
      this.val = e;
    },
    backtrack() {
      this.$router.go(-1);
    },
    //   ①封装 token
    // ②keyword：关键字
    // ③page：当前页，默认是 1
    // ④limit：每页条数，默认 20
    // ⑤sort：排序字段，默认 add_time（添加时间），其他：name 按名字
    // 排序，retail_price 按价格排序
    // ⑥order：升序或降序，默认 desc(降序)，其他：asc：升序
    // ⑦categoryId：类目 ID
    onSearch() {
      if (this.val != "") {
        this.list = [];
        // 判断重复
        for (let index = 0; index < this.lisjilu.length; index++) {
          if (this.lisjilu[index] == this.val) {
            console.log(this.lisjilu[index]);
            if (index == 0) {
              this.lisjilu.shift();
            } else {
              this.lisjilu.splice(0, index);
            }

            console.log(this.lisjilu);
          }
        }
        if (this.lisjilu.length > 5) {
          this.lisjilu.shift();
          this.lisjilu.push(this.val);

          localStorage.setItem("lisjilu", JSON.stringify(this.lisjilu));
        } else {
          this.lisjilu.push(this.val);

          localStorage.setItem("lisjilu", JSON.stringify(this.lisjilu));
        }

        this.http();
      } else {
        Toast("您未输入收索内容");
      }
    },
    http() {
      this.$get(API.GET_GOODS_LIST, {
        token: this.$store.state.token,
        page: this.index,
        sort: this.value1,
        order: this.value2,
        keyword: this.val,
      })
        .then((res) => {
          console.log(res);
          this.list = this.list.concat(res.data.list);
          this.show = false;
          this.index++;
          this.zonshu = res.data.pages;
        })
        .catch((err) => {});
    },
    paixa(val) {
      console.log(val);
      this.list = [];
      //    console.log(this.value1)
      // console.log(this.value2)
      this.http();
    },
    paixb(val) {
      this.list = [];
      //    console.log(this.value1)
      // console.log(this.value2)
      this.http();
    },

    lazyLoading() {
      this.$route.meta.Yaxis = window.pageYOffset;
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("滚动到底部，触发");

        if (this.index <= this.zonshu) {
          console.log(this.index);

          this.mai();
        }
      }
    },
    mai() {
      console.log("进来了");
      setTimeout(() => {
        this.http();
      }, 500);
    },

    guanb() {
      console.log("触发");
      window.addEventListener("scroll", this.lazyLoading);
    },

    todetails(e) {
      console.log("点击");
      this.$router.push({
        path: "/details",
        query: { userId: e },
      });
    },
    tads() {
      console.log(localStorage.getItem("lisjilu"));
      if (localStorage.getItem("lisjilu")) {
        this.lisjilu = JSON.parse(localStorage.getItem("lisjilu"));
        this.lisjilu.reverse();
      }

      console.log();
    },
    qingc() {
      this.lisjilu = [];
      localStorage.setItem("lisjilu", JSON.stringify(this.lisjilu));
    },
  },

  filters: {
    // 定义局部过滤器

    zhiti(value) {
      if (!value) return "";
      if (value.length > 9) {
        return value.slice(0, 9) + "...";
      }
      return value;
    },
  },

  deactivated() {
    window.removeEventListener("scroll", this.lazyLoading);
  },

  activated() {
    this.guanb();
    console.log("激活");
    this.tads();
  },
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      // alert(vm.num)
      // console.log(to);
      // console.log(from);
    });
  },
  beforeRouteLeave(to, from, next) {
    console.log(to);
    if (to.path != "/details") {
      console.log("离开的不是");
      this.val = "";

      this.show = true;
      this.value = "";
      this.value1 = "";
      this.value2 = "desc";

      this.list = [];
      this.index = 1;
      this.zonshu = 0;
    }
    next();
  },
};
</script>

<style lang="less" scoped>
.searchbods {
  width: 100%;
  display: flex;
  flex-direction: column;
  .sstop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgb(255, 255, 255);
  }
  // background-color: @background;
  height: 100%;
  .body {
    margin-top: 40px;
    background-color: @background;
    // height: 100%;
    flex: 1;
    ul {
      .monts();
      .title {
        font-size: 15px;
        display: flex;
        justify-content: space-between;
      }
      li {
        &:nth-child(2) {
          margin-top: 10px;
        }
        .juli {
          display: flex;
          span {
            // display: block;
            display: block;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            margin-left: 5px;
            margin-right: 5px;
            // border: 1px solid #000;
            border-radius: 5px;
            color: rgb(253, 253, 253);
            background-color: rgba(66, 66, 66, 0.596);
          }
        }
      }
    }
  }
}

.top {
  margin-right: 10px;
  margin-left: 10px;
}

.search {
  display: flex;
  width: 100%;
  align-items: center;
  background: rgb(255, 255, 255);
  .shos {
    flex: 1;
  }
  .img {
    height: 20px;
    display: block;
    width: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.searchbods {
  .liebiao {
    .paix {
      width: 100%;
      position: fixed;
      top: 50px;
      right: 0;
    }
    .kuanton {
      padding-top: 100px;
      // height: 1000px;
      margin-bottom: 10px;

      ul {
        margin-right: 5px;
        margin-left: 5px;
        display: flex;
        flex-wrap: wrap;

        li {
          margin-top: 10px;
          width: 50%;

          height: 220px;

          .coonte {
            border-radius: 5px;
            overflow: hidden;
            margin-right: 5px;
            margin-left: 5px;
            height: 100%;
            // border: 1px solid #000;
            background-color: rgb(248, 248, 248);
            .img {
              height: 150px;
              width: 100%;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .text {
              margin-left: 5px;
              margin-right: 5px;
              font-size: 16px;
              .texstitlie {
                display: flex;
                flex-direction: column;
                span {
                  &:nth-child(1) {
                    margin-bottom: 5px;
                  }
                }
                .qian {
                  display: flex;
                  justify-content: space-between;
                  span {
                    &:nth-child(2) {
                      padding: 2px 2px 2px 2px;
                      border-radius: 3px;
                      color: rgb(238, 238, 238);
                      background-color: rgb(238, 95, 119);
                    }
                  }
                }
              }
              .gon {
                display: flex;
                align-items: center;
                height: 30px;
                // border: 1px solid #000;
                justify-content: space-between;
                span {
                  padding: 5px 5px 5px 5px;
                  color: rgb(243, 235, 235);
                  border-radius: 5px;
                  &:nth-child(1) {
                    background-color: rgb(137, 188, 230);
                  }
                  &:nth-child(2) {
                    background-color: rgb(235, 110, 110);
                  }
                }
              }
            }
          }
          // border: 1px solid #000;
        }
      }
    }
  }
}
.meiyjul {
  height: 500px;
  // border: 1px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .img {
    width: 300px;
    height: 300px;
    // border: 1px solid #000;
    img{
      width: 100%;
      height: 100%;
    }
 
  }
   span{
    font-size: 17px;
    color: rgb(199, 199, 199);
  }
}
</style>